// 变量定义
$primary-color: #07c160;
$gray-light: #f5f5f5;
$gray: #999;
$gray-dark: #666;
$text-color: #333;
$border-color: #eee;
$red: #ff4d4f;
$yellow: #faad14;
$radius: 10rpx;
$spacing: 20rpx;

.feedback-page {
  min-height: 100vh;
  background-color: $gray-light;
  padding-bottom: 30rpx;

  // 筛选栏
  .filter-bar {
    background-color: #fff;
    padding: $spacing;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $border-color;

    .filter-item {
      display: flex;
      align-items: center;
      color: $gray-dark;
      font-size: 28rpx;

      .text {
        margin-right: 10rpx;
      }

      .icon {
        color: $gray;
        font-size: 24rpx;
      }
    }

    .filter-tag {
      background-color: $primary-color;
      color: white;
      font-size: 24rpx;
      padding: 5rpx 15rpx;
      border-radius: 20rpx;
    }
  }

  // 反馈列表
  .feedback-list {
    margin-top: $spacing;

    .feedback-item {
      background-color: #fff;
      border-radius: $radius;
      padding: 25rpx;
      margin: 0 $spacing $spacing;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .user-info {
          display: flex;
          align-items: center;
          .user-name {
            font-size: 28rpx;
            color: $text-color;
            font-weight: 500;
          }
        }

        .submit-time {
          font-size: 24rpx;
          color: $gray;
        }
      }

      .item-content {
        margin-bottom: 20rpx;

        .content-text {
          font-size: 26rpx;
          color: $gray-dark;
          line-height: 1.6;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .more-btn {
          color: $primary-color;
          font-size: 24rpx;
          margin-top: 5rpx;
        }
      }

      .item-images {
        display: flex;
        gap: 15rpx;
        margin-bottom: 15rpx;

        .image-item {
          width: 160rpx;
          height: 140rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
      
        .rating {
          display: flex;
          align-items: center;

          .rating-text {
            font-size: 24rpx;
            color: $gray-dark;
            margin-left: 10rpx;
          }
        }

        .status {
          font-size: 24rpx;
          padding: 0rpx 15rpx;
          border-radius: 20rpx;
          text-align: center;
        
          &.unhandled {
            background-color: rgba(255, 77, 79, 0.1);
            color: $red;
          }

          &.handled {
            background-color: rgba(7, 193, 96, 0.1);
            color: $primary-color;
          }
        }
      }
    }
  }

  // 空状态
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200rpx;

    .empty-icon {
      width: 150rpx;
      height: 150rpx;
      color: $gray;
      margin-bottom: 30rpx;
    }

    .empty-text {
      font-size: 28rpx;
      color: $gray;
    }
  }

  // 加载更多
  .load-more {
    text-align: center;
    padding: 30rpx 0;
    font-size: 26rpx;
    color: $gray;
  }
}
